import {useState} from 'react'
import useRequest from '../hooks/useRequest'

export default function Table() {
  let [data, options, setOptions] = useRequest()

  let { list, pageCount } = data

  let [size, setSize] = useState(10)
  console.log(data)

  return (
    <>
      <table className="table table-striped">
        <thead>
          <tr>
            <th>id</th>
            <th>name</th>
          </tr>
        </thead>
        <tbody>
          {list.map((item) => {
            return (
              <tr key={item.id}>
                <td>{item.id}</td>
                <td>{item.name}</td>
              </tr>
            )
          })}
        </tbody>
      </table>
      <div>
        <nav>
          <ul className="pagination">
            {new Array(pageCount).fill(0).map((item, index) => {
              return (
                <li
                  className="page-item"
                  key={index}
                  onClick={() => {
                    setOptions({ ...options, currentPage: index + 1 })
                  }}
                >
                  <a className="page-link" href="#">
                    {index + 1}
                  </a>
                </li>
              )
            })}
          </ul>
        </nav>

        {/* 下拉框 */}
        <select 
          className="form-select"
          value={size}
          onChange={(e) => {setSize(e.target.value); setOptions({currentPage: 1, pageSize: e.target.value})}}
        >
          <option value={5}>5</option>
          <option value={10}>10</option>
          <option value={20}>20</option>
        </select>
      </div>
    </>
  )
}
